<template>
  <div class="box">
      <div class="top">
        <el-card shadow="never">
          <div style="display: flex">
            <img src="../../assets/icons/金额.png" style="margin-top: 10px"/>
            <div class="sum"><span v-if="sumAndPrice"><h2>金额</h2> {{ sumAndPrice.totalAmount }}</span></div>
          </div>
        </el-card>
        <el-card shadow="never" style="margin-left: 100px">
          <div style="display:flex">
            <img src="../../assets/icons/订单.png" style="margin-top: 10px"/>
            <div class="sum"><span v-if="sumAndPrice"><h2>订单数</h2> {{ sumAndPrice.orderCount }}</span></div>
          </div>
        </el-card>
      </div>
      <div class="bottom">
        <div class="sales-info-card">
          <div class="chosse">
            <h4>热销榜单</h4>
          </div>
          <bar-graph v-if="tableData" :width="'920px'" :height="'400px'" :table-data="tableData"></bar-graph>
        </div>
      </div>
  </div>
</template>

<script setup lang="ts">
import {adminApi} from "../../api/app.js"
import {onMounted, ref} from "vue";
import BarGraph from "../../tools/BarGraph.vue";

// 销售表部分数据
const tableData = ref();
const sumAndPrice = ref();

onMounted(() => {
  adminApi.getSumAndPrice().then(response => {
    sumAndPrice.value = response;
  })
  adminApi.getTopTen().then(response => {
    tableData.value = response;
  })
})
</script>

<style scoped>
.box {
  margin: 10px 150px;
}
.el-card {
  width: 450px;
  height: 130px;
}
.top {
  display: flex;
}
.sales-info-card {
  width: 96%;
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  background-color: #FFFFFF;
}
.chosse {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.m-2 {
  width: 120px;
}
.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}
.sum {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 240px;
}
h2 {
  margin-bottom: 15px;
}
</style>